<template>
  <div id="devCenter">

    <tab-card
        title="可视化图表"
        text="使用Echarts进行绘制各种图表, 形象地展示数据"
        turn-path="/visualCharts"
        @turnToNewPage="turnTo">
      <template v-slot:cardIcon>
        <img src="~assets/img/charts.png" alt="">
      </template>
    </tab-card>
    <tab-card title="关系数据源"
              text="使用JDBC技术配置数据库及数据表"
              turn-path="/datasource"
              @turnToNewPage="turnTo">
      <template v-slot:cardIcon>
        <img src="~assets/img/database.png" alt="">
      </template>
    </tab-card>


<!--    <toast :is-show="show" :message="msg"/>-->
    <div class="btn" @click="showToast">弹出toast</div>



  </div>
</template>

<script>
	import TabCard from "components/TabCard";
	import Toast from "components/toast/Toast";
	export default {
		name: "DevCenterIndex",
		components: {
			Toast,
			TabCard
    },
    data() {
			return {
				show: false,
        msg: ''
      }
    },

    methods: {
			turnTo(path) {
				console.log("devCenter: ", path);
				this.$router.push(path);
			},
			showToast() {
        this.$toast.show('十多个放缓士大夫撒旦');
				console.log(this.$toast);
			}
		}

	}
</script>

<style scoped>
  #devCenter {
    padding: 10px;
    display: flex;
  }
</style>